開發者工具（Devtools）在網頁開發中是日常生活的一環，很多除錯的功能在很多大大的文章都有介紹，這篇文章要介紹的是如何使用瀏覽器內建的開發者工具作為無障礙檢測的好幫手。

Chrome 的開發者工具

快速開啟 Chrome Devtools

• Mac
  • Command + Option + I
• Windows, Linux, Chrome OS
  • Control + Shift + I

更多操作請查看 Google Developers - Open Chrome DevTools

無障礙檢測

任一網頁中，打開開發者工具的 Audits 頁籤來做檢測

• 打開 Audits 頁籤，使用 Lighthouse 做檢測，它本身可以做到的檢測，能根據不同的裝置與上網速度，做效能、PWA、SEO、最佳實踐、可訪問性的檢測。那因為我們今天要做的事無障礙檢測，就根據「上圖的設定」，來 Run audits，當我們開始檢測之後， Lighthose 就會自動幫我們做 30~40 種檢測事項。

針對維基百科做檢測

• 可以看到訪問性的分數以及建議的事項，而這每一個錯誤的項目都有下拉視窗可以打開來看該怎麼修正，因為 Lighthouse 在無障礙的檢測功能是依靠 deque 這間公司的 API 作為核心，所以可以看到該建議補充的超連結（上圖的最下方）都是來自於 deque 公司。
• 點選 Failing Elements 會直接幫我們切換到 Elements 頁籤中，找到有訪問性問題的元素，那麼就可以針對問題來做修正。

來看看 Elements 頁籤 下的 Accessibility

Accessibility 配合看 Acccessibility Tree 的內容

在這個頁籤中，我們可以從這顆「按鈕」在 Computed Properties 得知：

1. Name 的屬性權重：越上方的越重要， aria-labelledby > aria-label > <label> > 按鈕內容 > title。如果同時有不同屬性設置，名稱會以較上面的屬性為準。
2. Name 元素的名稱，是螢幕閱讀器將會唸出的內容。
3. 額外補充：如果在 aria-labelledby 指向的元素上額外設置 aria-hidden 或是 display: none; ，那麼就算有設名稱，也會直接被輔助裝置給忽略。
4. 角色是「button」，是可成為焦點的元素。

而 Accessibility Tree 也在這裡可以檢視，所以我們可以去 Inspect 頁面上任何一個元素再去查看 Accessibility Tree 長怎樣，會發現每一個元素都有自己的模型（Model），這棵樹就是提供給輔助科技解析的內容。

來看看 Elements 頁籤 下的 Styles 中的 Color Picker

• 文字顏色的對比度對於訪問性來說非常重要，所以在開發者工具中有提供 Color Picker 讓你可以去檢視目前「文字（前景）與背景色的對比數值」如果我們把它的下拉視窗打開來看看的話，如下圖！

• 在顏色區塊出現了兩條曲線，我們可以根據自己需要符合的等級（AA、AAA）在曲線內取色，馬上就能符合標準唷，真的很方便。

來不及介紹火狐 Firefox 的開發者工具，但是其實火狐的開發者工具對於開發者製作無障礙非常友善呢！

可以來參考這則影片（講者：Maliha Islam，2019 年在 Mozilla 的實習生，介紹得很清楚）及 Mozilla Firefox 的官方說明：

Reference

• What's new in web accessibility (Google I/O '18) - Google Chrome Developers @Youtube
• Accessibility Reference - Google Developers
• Colour Accessibility on the Web - Maliha Islam | Mozilla Intern Presentations 2019